import React from 'react';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Input, Button, message, Radio, Modal } from 'antd';

const FormItem = Form.Item;

const formItemLayout = {
    labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
    },
    wrapperCol: {
        xs: { span: 24 },
        sm: { span: 19 },
    },
};


class Edit extends React.Component {
    constructor(argus) {
        super(argus);

        this.state = {
            loading: false,
            ModelType: 'a'
        };
    }

    infoToParent(key) {
        this.props.callBack(key);
    }
    // 提交修改的内容
    handleUserSubmit = e => {
        e.preventDefault();
        const _this = this;
        this.props.form.validateFields((err, values) => {
            if (!err) {
                _this.setState({ loading: true, })
                // updateUser({ grade: userType, id: userid }).then(res => {
                //     if (res.retCode == '0') {
                //         message.success(`模型新建成功!`);
                //         that.infoToParent('');
                //     }
                // });
            }
        });
    };

    render() {
        const { getFieldDecorator } = this.props.form;
        const { ModelType, loading } = this.state;
        return (<span>

            <Modal
                title='新建模型'
                visible={this.props.isShowAddModel}
                onCancel={this.infoToParent.bind(this, false)}
                footer={[
                    <Button key="cancel" onClick={this.infoToParent.bind(this, false)}>
                        取消
                    </Button>,
                    <Button key="submit" type="primary" loading={loading} onClick={this.handleUserSubmit}>
                        确定
                    </Button>,
                ]}
            >
                <Form>
                    <Form.Item label="模型名称" {...formItemLayout}>
                        {getFieldDecorator('modelName', {
                            rules: [{ required: true, max: 16, message: '模型名称长度不超过16!' }],
                        })(
                            <Input placeholder="模型名称" />,
                        )}
                    </Form.Item>
                    <Form.Item label="模型类型" {...formItemLayout}>
                        {getFieldDecorator('modelType', {
                            rules: [{ required: true }],
                            initialValue: ModelType,
                        })(
                            <Radio.Group>
                                <Radio value="a">实体识别</Radio>
                                <Radio value="b">关系抽取</Radio>
                            </Radio.Group>,
                        )}
                    </Form.Item>
                </Form>
            </Modal>
        </span>
        );
    }
}

const AddModel = Form.create()(Edit);


export default AddModel;
